<!--
 * @Author: your name
 * @Date: 2021-08-23 21:02:50
 * @LastEditTime: 2021-10-02 11:01:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ewshop\src\components\common\navbar\NavBar.vue
-->
<template>
  <div class="nav-bar">
      <div class="left" @click="goback"><slot name="left"><img src="~assets/images/left.png"></slot></div>
      <div class="center"><slot>ewshop</slot></div>
      <div class="right"><slot name="right"></slot></div>
  </div>
</template>

<script>
import {useRouter} from 'vue-router'
export default {
    name:'NavBar',

    setup(){
        const router = useRouter();
        const goback = ()=>{
            router.go(-1);
        }
        return {goback}
    }
}
</script>

<style>
.nav-bar{
    display: flex;
    background-color: var(--color-tint);
    color: #FFFFFF;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
    height: 45px;
    line-height: 45px;
    text-align: center;
    box-shadow: 0 3px 0px rgba(100, 100, 100, 0.1);
}
.left,.right{
    width: 60px;
}
.left img{
    width: 45px;
    padding: 10px;
}
.center{
    flex: 1;
}
</style>